<script setup lang='ts' name="rights-management-add">
import type { FormInstance, FormRules } from 'element-plus'

import { updatePrivileges } from '@fl/api/iam-api'
import { nextTick, reactive, ref, toRefs } from 'vue'

import type { IAddForm } from './types'

const props = withDefaults(defineProps<{
    data?: any
    modelValue: boolean
}>(), {
    data: () => {},
})
const emits = defineEmits(['update:modelValue', 'confirm'])
const { data, modelValue } = toRefs(props)
const state = { code: '', description: '', display_name: '', group_name: '', module_name: '' }
const form = ref<IAddForm>({ ...state })
const title = ref('新增')
const formRef = ref()

const rules = reactive<FormRules<IAddForm>>({
    code: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    description: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    display_name: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    group_name: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    module_name: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
})

const ableEdit = computed(() => {
    return form.value?.id
})

async function doSave(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            updatePrivileges(form.value).then((res: any) => {
                console.log(res)
                close(formEl)
                emits('confirm')
            }).catch((err) => {
                const message = err?.response?.data?.message || err
                ElMessage({ message, type: 'error' })
            })
        }
        else {
            console.log('error submit!', fields)
        }
    })
}

function close(formEl: FormInstance | undefined) {
    formEl && formEl.resetFields()
    emits('update:modelValue', false)
}

async function init(isAdd = true) {
    await nextTick()
    if (isAdd) {
        title.value = '新增'
        form.value = { ...state }
    }
    else {
        title.value = '编辑'
        form.value = data.value
    }
}

defineExpose({
    init,
})
</script>

<template>
    <el-dialog v-model="modelValue"
               width="600"
               :close-on-click-modal="false"
               :title="title"
               @close="close"
    >
        <el-form ref="formRef"
                 :model="form"
                 :rules="rules"
                 label-width="auto"
                 style="max-width: 500px"
        >
            <el-form-item label="权限编码"
                          prop="code"
            >
                <el-input v-model="form.code"
                          :disabled="ableEdit"
                />
            </el-form-item>

            <el-form-item label="权限名称"
                          prop="display_name"
            >
                <el-input v-model="form.display_name" />
            </el-form-item>

            <el-form-item label="权限描述"
                          prop="description"
            >
                <el-input v-model="form.description" />
            </el-form-item>

            <el-form-item label="模块名"
                          prop="module_name"
            >
                <el-input v-model="form.module_name" />
            </el-form-item>

            <el-form-item label="分组名"
                          prop="group_name"
            >
                <el-input v-model="form.group_name" />
            </el-form-item>

            <el-form-item flex
                          flex-col
            >
                <el-button type="primary"
                           @click="doSave(formRef)"
                >
                    确定
                </el-button>

                <el-button @click="close(formRef)">
                    取消
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
